<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易手机通讯录管理系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }

        .container {
            width: 500px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
        }

        button {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f0f0f0;
            cursor: pointer;
        }

        button:hover {
            background-color: #e0e0e0;
        }

        #contactList {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        #contactList th, #contactList td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        #contactList th {
            background-color: #f2f2f2;
        }

        #contactList tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>手机通讯录管理系统</h1>

        <div class="form-group">
            <label for="nameInput">姓名:</label>
            <input type="text" id="nameInput" placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label for="phoneInput">电话:</label>
            <input type="text" id="phoneInput" placeholder="请输入电话">
        </div>

        <div class="button-group">
            <button id="addBtn">添加</button>
            <button id="queryBtn">查询</button>
            <button id="deleteBtn">删除</button>
            <button id="resetBtn">重置</button>
        </div>

        <table id="contactList">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>电话</th>
                </tr>
            </thead>
            <tbody>
                <!-- 联系人列表将在这里动态生成 -->
            </tbody>
        </table>
    </div>

    <script>
        // DOM元素
        const nameInput = document.getElementById('nameInput');
        const phoneInput = document.getElementById('phoneInput');
        const addBtn = document.getElementById('addBtn');
        const queryBtn = document.getElementById('queryBtn');
        const deleteBtn = document.getElementById('deleteBtn');
        const resetBtn = document.getElementById('resetBtn');
        const contactList = document.querySelector('#contactList tbody');

        // 从localStorage加载联系人
        let contacts = JSON.parse(localStorage.getItem('contacts')) || [];

        // 初始化页面
        function initPage() {
            renderContacts();
        }

        // 渲染联系人列表
        function renderContacts() {
            contactList.innerHTML = '';
            contacts.forEach((contact, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${contact.name}</td>
                    <td>${contact.phone}</td>
                `;
                contactList.appendChild(row);
            });
        }

        // 添加联系人
        addBtn.addEventListener('click', function() {
            const name = nameInput.value.trim();
            const phone = phoneInput.value.trim();

            if (name && phone) {
                contacts.push({ name, phone });
                localStorage.setItem('contacts', JSON.stringify(contacts));
                renderContacts();
                resetFields();
            } else {
                alert('请输入姓名和电话');
            }
        });

        // 查询联系人
        queryBtn.addEventListener('click', function() {
            const name = nameInput.value.trim();
            if (name) {
                const foundContact = contacts.find(contact => contact.name === name);
                if (foundContact) {
                    phoneInput.value = foundContact.phone;
                } else {
                    phoneInput.value = '';
                    alert('未找到该联系人');
                }
            } else {
                alert('请输入要查询的姓名');
            }
        });

        // 删除联系人
        deleteBtn.addEventListener('click', function() {
            const name = nameInput.value.trim();
            if (name) {
                contacts = contacts.filter(contact => contact.name !== name);
                localStorage.setItem('contacts', JSON.stringify(contacts));
                renderContacts();
                resetFields();
            } else {
                alert('请输入要删除的姓名');
            }
        });

        // 重置表单
        resetBtn.addEventListener('click', resetFields);

        function resetFields() {
            nameInput.value = '';
            phoneInput.value = '';
        }

        // 初始化页面
        initPage();
    </script>
</body>
</html>